<template>
    <div class="search-box">
        <div class="row">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div class="right">
                <el-button @click="queryReset()">重置</el-button>
                <el-button type="primary" @click="querySearch()">查询搜索</el-button>
            </div>
        </div>
        <div class="row">
            <span>账号/姓名:</span>
            <el-input placeholder="品牌名称/关键字" v-model="queryParams.keyword" @input="queryLenght"></el-input>
        </div>
    </div>
    <div class="search-box">
        <div class="row_tow">
            <div class="left">
                <el-icon>
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button type="primary" @click="router.push('/pms/addBrand')">添加</el-button>
            </div>
        </div>
    </div>
    <el-table :data="brandList" border table-layout="auto" cell-class-name="align-c"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="编号" prop="id" />
        <el-table-column label="品牌名称" prop="name" />
        <el-table-column label="品牌首字母" prop="firstLetter" />
        <el-table-column label="排序" prop="sort" />
        <el-table-column label="品牌制造商">
            <template #default="{ row }">
                <el-switch v-model="row.factoryStatus" :active-value="1" :inactive-value="0"
                    @change="switchFactoryStatus(row)" />
            </template>
        </el-table-column>
        <el-table-column label="是否显示">
            <template #default="{ row }">
                <el-switch v-model="row.showStatus" :active-value="1" :inactive-value="0"
                    @change="switchShowStatus(row)" />
            </template>
        </el-table-column>
        <el-table-column label="相关">
            <template #default="{ row }">
                <div class="cell">
                    <span>商品：</span>
                    <span style="color: #409eff;font-size: 12px;">100</span>
                    <span>评价：</span>
                    <span style="color: #409eff;font-size: 12px;">1000</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button size="small" @click="router.push(`/pms/updateBrand?id=${row.id}`)">编辑</el-button>
                <el-button size="small" type="danger" @click="editUser(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="bottom">
        <div class="left">
            <el-select v-model="SelVal" class="m-2" placeholder="批量操作">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" style="margin-left: 10px;" @click="ConfirmTn">确定</el-button>
        </div>
        <el-config-provider :locale="zhCn">
            <div class="page">
                <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                    :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                    :total="total" @size-change="queryBrandList" @current-change="queryBrandList" />
            </div>
        </el-config-provider>
    </div>
</template>
<script setup lang='ts'>
import { Search, Tickets } from "@element-plus/icons-vue";
import { reactive, ref } from 'vue';
import { ElConfigProvider, ElMessage } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { BrandDeleteApi, FactoryStatusApi, getBrandListApi, ShowStatusApi } from "./api";
import { useRouter } from "vue-router";

const brandList = ref<BrandList[]>([])
const total = ref()
const queryParams = reactive<IUserListParams>({
    keyword: "",
    pageNum: 1,
    pageSize: 10
})
const router = useRouter()
const deleteList = ref<number[]>([])
const SelVal = ref()

// 多选
const handleSelectionChange = (val: BrandList[]) => {
    deleteList.value = val.map(item => item.id)
}

const options = ref([
    { value: 0, label: '隐藏品牌', },
    { value: 1, label: '显示品牌', },
])

// 列表渲染
const queryBrandList = () => {
    getBrandListApi(queryParams).then(res => {
        if (res.code === 200) {
            brandList.value = res.data.list
            total.value = res.data.total
        }
    })
}
queryBrandList()

// 查询搜索
const querySearch = () => {
    if (queryParams.keyword?.trim()) {
        queryBrandList()
    } else {
        ElMessage.error("请先输入搜索内容")
    }
}

// 当输入框有内容才可以重置
const queryReset = () => {
    if (queryParams.keyword?.trim()) {
        queryParams.keyword = ''
        queryBrandList()
    }
}

// 当删除输入框所有内容后
const queryLenght = () => {
    if (!queryParams.keyword?.trim()) {
        queryBrandList()
    }
}

// 品牌制造商状态
const switchFactoryStatus = (row: BrandList) => {
    FactoryStatusApi(row.id as unknown as number[], row.factoryStatus).then(res => {
        if (res.code === 200) {
            ElMessage.success('修改成功')
        }
    })
}

// 显示更新状态
const switchShowStatus = (row: BrandList) => {
    ShowStatusApi(row.id as unknown as number[], row.showStatus).then(res => {
        if (res.code === 200) {
            ElMessage.success('修改状态成功')
        }
    })
}

// 删除
const editUser = (id: number) => {
    BrandDeleteApi(id).then(res => {
        if (res.code === 200) {
            ElMessage.success('删除成功')
            queryBrandList()
        }
    })
}

const ConfirmTn = () => {
    ShowStatusApi(deleteList.value, SelVal.value).then(res => {
        if (res.code === 200) {
            ElMessage.success('修改成功')
            queryBrandList()
        }
    })
}
</script>

<style lang="less" scoped>
:deep(.align-c),
:deep(.cell) {
    text-align: center;
}

.search-box {
    box-shadow: 0 0 4px 2px #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;

    .row {
        padding: 0 0 20px 0;
        display: flex;
        align-items: center;

        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            width: 300px;
            display: flex;
            align-items: center;
            margin-left: 20px;

            span {
                width: 120px;
            }
        }
    }

    .left {

        span {
            margin-left: 10px;
        }
    }

    .row_tow {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.page {
    margin: 20px 0;
    height: 20px;

    :deep(.el-pagination) {
        float: right;

    }
}

.bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left {
    margin: 20px 0;
    height: 20px;
    display: flex;
    align-items: center;
    margin-left: 10px;

    span {
        margin-left: 5px;
    }
}
</style>